@import '~/common/style/index.scss';
$file-prefix-cls: #{$cui-prefix}-message-file;
.#{$file-prefix-cls}{
    height: 44px;
    width: 240px;
    min-width: 122px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    &-secondly{
        flex-direction: row;
        .#{$file-prefix-cls}-info{
            span:nth-child(1){
                color: $font-color;
                &:hover{
                    color: $blue-5;
                }
            }
            span:nth-child(2){
                color: $special-5;
            }
        }
    }
    &-icon{
        width: 44px;
        height: 44px;
        background: $component-background;
        border-radius: 9px;
        display: flex;
        justify-content: center;
        align-items: center;
    };

    &-info{
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        width: calc(100% - 54px);
        span:nth-child(1){
            font-weight: 500;
            font-size: $font-size-lg;
            line-height: 24px;
            /* identical to box height, or 150% */
            color: $gray-98;
            white-space: nowrap;
            text-align: left;

            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;

            &:hover{
                color: $gray-9;
                cursor: pointer;
                text-decoration: underline;
            }
        }
        span:nth-child(2){
            font-weight: 400;
            font-size: $font-size-base;
            line-height: 20px;
            /* identical to box height, or 143% */
            /* color_neutral_special/5 */
            color: $gray-95;
            text-align: left;
        }
    }
}

.#{$file-prefix-cls}-dark{
    .#{$file-prefix-cls}-icon{
        background: $gray-2;
    }
    .#{$file-prefix-cls}-info{
        span:nth-child(1){
            color: $gray-1;
            &:hover{
                color: $gray-2;
            }
        }
        span:nth-child(2){
            color: $gray-2;
        }
    }
}

.#{$file-prefix-cls}-dark.#{$file-prefix-cls}-secondly{
    .#{$file-prefix-cls}-info{
        span:nth-child(1){
            color: $gray-98;
            &:hover{
                color: $blue-7;
            }
        }
        span:nth-child(2){
            color: $special-6;
        }
    }
}